<template>
  <div class="chat-content">
    <div class="content">
      <div v-for="(item, index) in content" :key="index">
        <div class="content-item" v-if="item.he">
          <el-avatar :size="30" :src="friendAvatar"></el-avatar>
          <div class="chat-word">{{ item.he }}</div>
        </div>

        <div class="content-item2" v-else>
          <div class="chat-word">{{ item.my }}</div>
          <el-avatar :size="30" :src="myAvatar"></el-avatar>
        </div>
      </div>
    </div>

    <ChatInput></ChatInput>
  </div>
</template>

<script lang="ts" setup>
import ChatInput from "../../chatInput";
interface IContent {
  time: string;
  my?: string;
  he?: string;
}
import { newUseStore } from "@/store";
import { computed } from "vue";
const store = newUseStore();

const friendAvatar = computed(
  () => store.getters[store.lsGetters.moduleChat.currentChat as any]?.avatar
);

const myAvatar = store.state.moduleUser.userInfo.avatar;

const token = store.state.moduleUser.userInfo.token;
const ws = new WebSocket("ws://localhost:8888", token);

const content = computed(
  () => store.getters[store.lsGetters.moduleChat.currentChatContent as any]
);

console.log("content:", content);

ws.onopen = (ev) => {
  console.log("连接成功", ev);
};
</script>
<style lang="less" scoped>
.chat-content {
  margin-top: 4vw;
  height: 100%;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  .content {
    background-color: #efefef;
    height: calc(100% - 20vw);
    overflow-y: scroll;
    .content-item {
      display: flex;
      margin-top: 1.5vw;
      .chat-word {
        padding: 1vw 2vw;
        font-size: 1.05vw;
        max-width: 10vw;
        background: chartreuse;
        border-radius: 20%;
        margin-left: 5vw;
      }
    }

    .content-item2 {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5vw;
      .chat-word {
        padding: 1vw 2vw;
        font-size: 1.05vw;
        max-width: 10vw;
        background: rgb(22, 110, 211);
        border-radius: 20%;
        margin-right: 5vw;
        color: #fff;
      }
    }
  }
  .inp {
    max-height: 10vw;
  }
}
</style>
